<template>
  <div class="user-page">
    <!-- 登录注册 -->
    <div class="users-login">
      <!-- 头像 -->
      <van-image round width="54" height="54" :src="userInfo&&userInfo.personal_info?userInfo.personal_info.avatar:''"   />
      <!-- 登录注册 -->
      <div v-if="!userInfo" class="user-loginbtn">
        <router-link :to="{ name: 'user_login', params: { id: '登陆' } }"> 登陆 </router-link>/
        <router-link :to="{ name: 'user_login', params: { id: '注册' } }"> 注册 </router-link>
      </div>
      <div v-else class="user-info">
        <div class="user-info-nickname">{{ userInfo.personal_info?userInfo.personal_info.nick_name:'' }}</div>
        <div class="user-info-email">{{ userInfo.email }}</div>
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="orderform-nav">
      <van-cell title="我的订单" is-link clickable center value="全部订单" />
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image width="24" height="24" :src="require('@/assets/icon/user/wait-pay.png')" />
          <div class="link-name">待付款</div>
        </van-grid-item>
        <van-grid-item>
          <van-image width="24" height="24" :src="require('@/assets/icon/user/car.png')" />
          <div class="link-name">待收货</div>
        </van-grid-item>
        <van-grid-item>
          <van-image width="24" height="24" :src="require('@/assets/icon/user/repair.png')" />
          <div class="link-name">退换修</div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 会员，优惠 -->
    <div class="serve-nav">
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/vip.png')" />
            <span class="custom-title">会员中心</span>
          </div>
        </template>
      </van-cell>
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/discount.png')" />
            <span class="custom-title">我的优惠</span>
          </div>
        </template>
      </van-cell>
    </div>


    <!-- 服务，小米之家 -->
    <div class="serve-nav">
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/serve.png')" />
            <span class="custom-title">服务中心</span>
          </div>
        </template>
      </van-cell>
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/shop.png')" />
            <span class="custom-title">小米之家</span>
          </div>
        </template>
      </van-cell>
    </div>


    <!-- F码，礼物兑换 -->
    <div class="serve-nav">
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/fcode.png')" />
            <span class="custom-title">我的F码</span>
          </div>
        </template>
      </van-cell>
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/gift.png')" />
            <span class="custom-title">礼包码兑换</span>
          </div>
        </template>
      </van-cell>
    </div>


    <!-- 设置 -->
    <div class="serve-nav">
      <van-cell is-link clickable>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="serve-nav-item">
            <van-image width="24" height="24" :src="require('@/assets/icon/user/set.png')" />
            <span class="custom-title">设置</span>
          </div>
        </template>
      </van-cell>
      <van-button size="large" @click="logout">退出登录</van-button>
    </div>




  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const store = useStore()//vuex
    if (store.state.user.userInfo && store.state.user.userInfo.access_token) {
      store.dispatch('user/getUserInfo')
    }
    // console.log(store.state.user.userInfo.personal_info);
    // 用户信息的计算属性
    const userInfo = computed(() => {
      // 如果存在用户信息就返回
      if (store.state.user.userInfo && store.state.user.userInfo.personal_info) {
        return store.getters['user/userInfoGetters']
      } else {
        // 不存在用户信息就获取之后在放回
        // store.dispatch('user/getUserInfo')
        return store.getters['user/userInfoGetters']
      }
    })
    const instance = getCurrentInstance()
    const _this = instance.appContext.config.globalProperties
    // 退出登录逻辑
    const logout = () => {
      _this.$dialog.confirm({
        message: '您确认退出吗',
      })
        .then(() => {
          store.commit('user/setUserinfo', undefined)
          _this.$toast('退出登陆成功')
        })
        .catch(() => {
          console.log('quxiao');
        });
    }

    return {
      userInfo, logout
    }
  }
}
</script>

<style lang="scss" scoped>
.user-page {
  background-color: #f5f5f5;
  // height: 100vh;

  .serve-nav {
    &:last-child {
      padding-bottom: 50px;
      margin-top: 10px;
    }

    margin-top: 10px;

    // ::v-deep .van-cell{
    //   padding: 10px,0;
    // }
    ::v-deep .serve-nav-item {
      padding: 5px 0;

      .van-image {
        // vertical-align: sub;
        vertical-align: middle;
      }

      .custom-title {
        margin-left: 16px;
      }
    }
  }
}

.users-login {
  display: flex;
  align-items: center;
  padding-left: 18px;
  // width: 100%;
  height: 82px;
  background: url("https://m.mi.com/static/img/bg.63c8e19851.png") center 0 #f37d0f;
  background-size: 100% 100%;
  .user-info{
    margin-left: 8px;
    .user-info-nickname{
      color: #fff;
      font-size: 13px;
    }
    .user-info-email{
      color:#fbb0b4;
      padding-top: 5px;
      font-size: 11px;
    }
  }

  .van-image__img {
    height: 54px;
  }

  .user-loginbtn {
    margin-left: 8px;
    font-size: 12px;
    color: #fff;

    a {
      color: #fff;

    }
  }
}

.orderform-nav {
  ::v-deep .van-cell__value {
    font-size: 10px;
  }
}

.link-name {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}
</style>